<template>
  <el-card header="班级表现">
    <!-- 选择器 -->
    <div id="classPerformanceChart" style="height: 250px; margin-top: 30px; padding-left: 50px;"></div>
    <!-- 底部统计 -->
    <div class="chart-footer">
      <el-tag type="danger">挂科率：{{ failRate }}%</el-tag>
      <el-tag type="success">评奖率：{{ awardRate }}%</el-tag>
    </div>
  </el-card>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'ClassPerformanceChart',
  props: {
    performanceData: {
      type: Object,
      required: true
    }
  },
  computed: {
    failRate() {
      return ((this.performanceData.fail / this.performanceData.total) * 100).toFixed(1)
    },
    awardRate() {
      return ((this.performanceData.award / this.performanceData.total) * 100).toFixed(1)
    }
  },
  methods: {
    initChart() {
      const chart = echarts.init(document.getElementById('classPerformanceChart'))
      const option = {
        // 图表配置
      }
      chart.setOption(option)
    }
  },
  mounted() {
    this.initChart()
  }
}
</script>